<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据应用-数据同步历史-数据表同步详情</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">
<!--顶部条-->
<div style="padding: 0 7px 15px 7px" class="clearfix">
    <!--搜索输入框组-->
    <div class="clearfix">
        <div class="input-group pull-left" style="width: 50%">
            <input id="keyword" class="form-control" type="search" placeholder="数据表">
            <div class="input-group-append">
                <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
            </div>
        </div>
    </div>
    <!--过滤-->
    <div style="margin-top: 10px;">
        <div class="icheck-danger d-inline">
            <input id="diff" type="radio" name="filter">
            <label for="diff" class="text-info">同步行数 > 0</label>
        </div>
        <div class="icheck-info d-inline" style="margin-left: 10px">
            <input id="same" type="radio" name="filter">
            <label for="same" class="text-danger">同步行数 = 0</label>
        </div>
        <div class="icheck-default d-inline" style="margin-left: 10px">
            <input id="ignore" type="radio" name="filter" checked>
            <label for="ignore" class="">所有数据</label>
        </div>
    </div>
</div>
<!--数据展示-->
<div class="container-fluid">
    <table id="table" class="table table-sm table-hover table-bordered">
        <thead><tr>
            <th rowspan="2" style="vertical-align: middle;text-align: center;">#</th>
            <th id="dataSource" colspan="4" style="text-align: center;"></th>
            <th rowspan="2" style="vertical-align: middle;text-align: center;">同步行数</th>
        </tr><tr>
            <th>表名称</th>
            <th>同步前行数</th>
            <th>表名称</th>
            <th>同步前行数</th>
        </tr></thead>
        <tbody><tr>
            <td>{{index}}</td>
            <td>{{tableFrom}}</td>
            <td>{{countFrom}}</td>
            <td>{{tableTo}}</td>
            <td>{{countTo}}</td>
            <td>{{countTransporter}}</td>
        </tr>
        </tbody>
    </table>
</div>
<!--加载更多-->
<div id="load-more" class="text-sm-center text-primary" style="display: none;">
    <span style="cursor: pointer"><i class="fa fa-hand-o-right"></i> 点击加载更多数据</span>
</div>
<!--正在加载-->
<div id="loading" class="text-sm-center text-gray" style="display: none;">
    <span><i class="fa fa-refresh fa-spin"></i> 正在加载...</span>
</div>
<!--全部加载-->
<div id="load-all" class="text-sm-center text-success" style="display: none;">
    <i class="fa fa-info-circle"></i> 已加载全部数据
</div>
<!--加载失败-->
<div id="load-error" class="text-sm-center text-danger" style="display: none;">
    <i class="fa fa-exclamation-triangle"></i> 加载失败
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var params = Utils.getParams(location.href);
    var dataCompareHistoryId = params["id"];
    var dataSourceFromId = params["dsIdFrom"];
    var dataSourceToId = params["dsIdTo"];
    var dataSourceFromName = params["dsNameFrom"];
    var dataSourceToName = params["dsNameTo"];
    var dataSourceFromTypeName = params["dsTypeNameFrom"];
    var dataSourceToTypeName = params["dsTypeNameTo"];
    var dataSourceFromTypeValue = params["dsTypeValueFrom"];
    var dataSourceToTypeValue = params["dsTypeValueTo"];
    var dataSourceFromUrl = params["dsUrlFrom"];
    var dataSourceToUrl = params["dsUrlTp"];
    var dataSourceFromTypeClass = dataSourceFromTypeName === "MYSQL" ? "bg-info" : "bg-warning";
    var dataSourceToTypeClass = dataSourceToTypeName === "MYSQL" ? "bg-info" : "bg-warning";

    $("#dataSource").html(
        "<span class='badge " + dataSourceFromTypeClass + "'>" + dataSourceFromTypeValue + "</span> " + dataSourceFromName +
        "<i class='fa fa-arrow-right ml-3 mr-3'></i>" +
        "<span class='badge " + dataSourceToTypeClass + "'>" + dataSourceToTypeValue + "</span> " + dataSourceToName
    );

    var tableCtrl = new TableCtrl(
        Url.dataService.dataTransporterHistoryTable,
        Url.unsupported, Url.unsupported, Url.unsupported, Url.unsupported,
        function (template, record, index) {
            return template
                .replace(new RegExp("{{index}}", "gm"), index + 1)
                .replace(new RegExp("{{tableFrom}}", "gm"), record.tableFrom)
                .replace(new RegExp("{{tableTo}}", "gm"), record.tableTo)
                .replace(new RegExp("{{countFrom}}", "gm"), record.countFrom)
                .replace(new RegExp("{{countTo}}", "gm"), record.countTo)
                .replace(new RegExp("{{countTransporter}}", "gm"), record.countTransporter)
        },
        function () {
            return undefined;
        }, "tableFrom", "ASC"
    );
    tableCtrl.extraUrlSearch = function (url) {
        if (Utils.isEmpty(dataCompareHistoryId)) {
            return undefined;
        }

        this.keywordSort = "tableFrom";
        this.keywordOrder = "ASC";

        url = url.replace("{id}", dataCompareHistoryId);
        if (Utils.notEmpty(this.keyword)) {
            url += "&table=" + encodeURIComponent(this.keyword);
        }
        if ($("#diff").prop("checked")) {
            url += "&transported=true";
            this.keywordSort = "countTransporter";
            this.keywordOrder = "DESC";
        }
        if ($("#same").prop("checked")) {
            url += "&transported=false";
        }
        return url;
    };
    tableCtrl.extraBind = function () {
        $("#diff, #same, #ignore").click(function () {
            $("#search").click();
        })
    }

    tableCtrl.getTemplate();
    tableCtrl.getRecords();
    tableCtrl.bindEvent();
</script>

</body>
</html>